/**
 * Copyright @ 2023 iAuto (Shanghai) Co., Ltd.
 * All Rights Reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are NOT permitted except as agreed by
 * iAuto (Shanghai) Co., Ltd.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 */

import { Form, Row, Input, Col, Space, DatePicker, TableColumnsType } from 'antd';
import IAutoPage from '@/components/soa/IAutoPage';
import IAutoSearch from '@/components/soa/IAutoSearch';
import IAutoTable from '@/components/soa/IAutoTable';
import React from 'react';
import { useAntdTable } from 'ahooks';
import styles from '@/pages/soaManage/scene/official/index.less';
import { getOperationList } from '@/services/soa/operationHistory';
import { IOperationItem } from '@/types/operationHistory';
// import IAutoSearchInput from "@/components/soa/IAutoSearchInput";
import { getDateTime } from '@/utils/soa/utils';
import IAutoButton from '@/components/soa/IAutoButton';

const { RangePicker } = DatePicker;
const { Item, useForm } = Form;

const columns: TableColumnsType<IOperationItem> = [
  {
    title: '操作人',
    width: 330,
    dataIndex: 'createNickName',
  },
  {
    title: '操作内容',
    dataIndex: 'description',
    ellipsis: true,
  },
  {
    title: '操作时间',
    dataIndex: 'createTime',
    width: 257,
    render: text => getDateTime(text),
  },
];

export default (props: any) => {
  const [form] = useForm();
  const {
    location: { pathname },
  } = props;
  const { tableProps, search } = useAntdTable(getOperationList, {
    form,
  });

  const { submit } = search;

  return (
    <div className={styles.main}>
      <IAutoSearch>
        <Row gutter={[8, 8]}>
          <Col span={18}>
            <Form form={form} layout={'inline'}>
              <Item name="keyword" style={{ marginBottom: '8px' }}>
                {/*<IAutoSearchInput style={{width:392}} submit={submit} placeholder="请输入关键字进行检索" />*/}
                <Input
                  style={{ width: 392 }}
                  placeholder="请输入关键字进行检索"
                  allowClear
                  maxLength={20}
                />
              </Item>
              <Item label="选择日期" name="datetime">
                <RangePicker allowClear></RangePicker>
              </Item>
            </Form>
          </Col>
          <Col
            span={6}
            style={{
              paddingBottom: '8px',
              display: 'flex',
              alignItems: 'end',
              justifyContent: 'end',
            }}
          >
            {/*<Button type={'primary'} onClick={submit} size={'small'}>*/}
            {/*  查询*/}
            {/*</Button>*/}
            <IAutoButton
              size="small"
              buttonType={'form'}
              type={'primary'}
              onClick={submit}
              pathname={pathname}
              auth={'operationHistory_doSearch'}
            >
              查询
            </IAutoButton>
          </Col>
        </Row>
      </IAutoSearch>
      <IAutoPage>
        <IAutoTable columns={columns} tableProps={tableProps} />
      </IAutoPage>
    </div>
  );
};
